<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span><br>
        <button @click="changeFullName">update fullName to 'li-si'</button>
    </div>
</template>

<script setup lang="ts" name = 'Person'>
    import { log } from 'console';
import { ref,computed } from 'vue';

    let firstName = ref('zhang')
    let lastName = ref('san')

    //this way defined fullName is a computed propertise,and it's onlyread
    // let fullName = computed(()=>{
    //     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })
    
    //this way defined fullName is a computed propertise,and it can be read and writen
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(val){
            const [str1,str2] = val.split('-')
            firstName.value = str1
            lastName.value = str2
        }
    })

    function changeFullName(){
        fullName.value = 'li-si'
    }
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}

li{
    font-size: 20px;
}
</style>